<template>
  <div style="height: 100%">
    <ProTable
      ref="tableRef" 
      :columns="columns"
      :request-api="getTableList"
      :params="initParam"
      @reset="onSearchReset"
    >
      <template #userAge="{ model }">
        <div style="display: flex;" v-if="model">
          <el-input v-model="model.minAge" placeholder="最小年龄" style="width: 50%" />
          <span class="mr10 ml10">-</span>
          <el-input v-model="model.maxAge" placeholder="最大年龄" style="width: 50%" />
        </div>
      </template>
      <template #selectRowKeys>
        <TableSelect
          ref="tableSelectDialogRef"
          componentName="TableA"
          v-model:selectedList="selectedList"
          :optionAlias="{ label: 'username' }"
          :multiple="true"
        ></TableSelect>
      </template>
      <!-- 表格 header 按钮 -->
      <template #tableHeader="{ selectedIds }">
        <el-button type="primary" @click="showDialog()">新增用户</el-button>
        <el-button type="danger" :disabled="!selectedIds.length" @click="handleDelete(selectedIds)">批量删除</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
      </template>
      <!-- 表格操作 -->
      <!-- <template #operation>
          <el-button type="primary" link>查看</el-button>
          <el-button type="primary" link>编辑</el-button>
          <el-button type="primary" link>重置密码</el-button>
          <el-button type="primary" link>删除</el-button>
        </template> -->
    </ProTable>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SearchTableDemo',
}
</script>
<script setup lang="ts">
import { ColumnProps } from '@/types/table';
import { UserPageVO } from "@/api/user/types";
import { ElMessageBox } from "element-plus";
import { getUserList } from "@/api/user";

const showDialog = (row?: any) => {
  if (!row) {
    alert("添加")
  } else {
    alert("编辑")
  }
}

const handleDelete = (selectedIds: number[]) => {
  ElMessageBox.confirm(
    '确定删除?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
    })
    .catch(() => {
    })
}

// 表格列
const columns = ref<ColumnProps<UserPageVO>[]>([
  { type: "selection", fixed: "left" },
  { type: "index", label: "序号" },
  { type: "expand", label: "Expand", width: 80 },
  {
    prop: "username",
    label: "用户姓名",
    valueType: "input",
    search: true,
  },
  {
    prop: "gender",
    label: "性别",
    width: 100,
    // 字典数据
    options: [
      {
        label: "女", value: 1
      },
      {
        label: "男", value: 2
      },
    ],
    valueType: "select",
    search: true,
  },
  {
    prop: "age",
    label: "年龄",
    width: 144,
    customRender: (row: any) => row.user.detail?.age,
    search: {
      // 自定义 search 显示内容
      valueType: "custom",
      prop: "userAge"
    },
  },
  {
    prop: "selectValues",
    label: "表格弹窗",
    hideInTable: true,
    search: {
      valueType: "custom",
      prop: "selectRowKeys",
      defaultValue: []
    },
  },
  {
    prop: "idCard",
    label: "身份证号",
    valueType: "input",
    search: true,
  },
  { 
    prop: "email", 
    label: "邮箱",
  },
  {
    prop: "address",
    label: "居住地址",
  },
  {
    prop: "status",
    label: "用户状态",
    options: [],
    valueType: "select",
    search: true,
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 180,
  },
  {
    prop: "operation",
    label: "操作",
    fixed: "right",
    width: 180,
    buttons: [
      {
        label: "查看",
        on: {
          click: (row: any) => {
            alert(row.username)
          }
        }
      },
      {
        label: "编辑",
        on: {
          click: showDialog
        }
      },
    ]
  }
])

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getUserList(newParams).then((res: any) => {
    return res.data
  });
};

const initParam = reactive({
  type: 1,
});

const init = async () => {
  setTimeout(() => {
    const arr = [
      { label: "禁用", value: 0 },
      { label: "启用", value: 1 },
    ]
    const target = columns.value.find(item => item.prop === 'status')
    if (!target) return
    target.options = arr
  }, 1000);
}

onMounted(() => {
  init()
})

const selectedList = ref<any[]>([]);

watch(selectedList, (newValue) => {
  console.log(
    "列表请求弹窗参数",
    newValue
  );
});

function onSearchReset() {
  selectedList.value = [];
}
</script>

<style></style>
